<template>
<div class="navbar">
  <el-menu :router="true" default-active="/Home" class="el-menu-demo" mode="horizontal"
      @open="handleOpen" @close="handleClose"  background-color="white" text-color="black" active-text-color="red">
    <el-menu-item index="/Home">主页</el-menu-item>
<!--    <el-submenu index="2">
    <template slot="title">酒文化</template>
      <el-menu-item index="/WineHistory">酒历史</el-menu-item>
      <el-menu-item index="/BrewingWine">酒的酿造</el-menu-item>
      <el-menu-item index="/Classification">酒的分类</el-menu-item>
      <el-menu-item index="/Attention">饮酒注意事项</el-menu-item>
    </el-submenu>-->
    <el-menu-item index="/Classification">酒的分类</el-menu-item>
    <el-menu-item index="/WineHistory">酿造分类</el-menu-item>
    <el-menu-item index="/Purchase">购买中心</el-menu-item>
<!--    <el-menu-item index="/Conversation">酒友交谈中心</el-menu-item>-->
    <el-menu-item index="/Personal">个人中心</el-menu-item>
  </el-menu>

</div>
</template>

<script>
export default {
  name: "HomepageNavbar",
  methods: {
   /* handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },*/
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  data() {
    return {
      /*activeIndex: '1',
      activeIndex2: '1'*/
    };
  },
}
</script>

<style scoped>
.navbar{
  position: absolute;
  width: 100%;
  /*height: 100px;*/
  left:0;
  top:50px;
  /*margin-top: 20px;*/
  margin: auto;
  /*background-color: gray;*/
  /*bottom: 0px;*/
  /*如果超出范围，让他自动产生滚动条*/
  /*overflow-y:auto ;*/
}
</style>
